<template>
	<view class="template-account-budget">
		<tn-nav-bar fixed :bottomShadow="false" customBack backTitle="" backgroundColor="#ffd946">
			<view class="top-tab">
				<tn-tabs :list="accountBudgetTypes" :itemWidth="160" :height="tabsHeight" :showBar="false" activeColor="#000" :bold="true" :fontSize="30" :current="topTabsIndex" @change="topTabsChange"></tn-tabs>
			</view>
			<view class="top-right" slot="right">
				<text class="tn-icon-close" @click="close"></text>
			</view>
		</tn-nav-bar>

		<view class="budget_content" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="item">
				<view class="title">12月总预算</view>
				<view class="item_content tn-flex">
					<view class="chart">
						<tn-circle-progress :percent="50" activeColor="#ffd946" :showPercent="true"></tn-circle-progress>
					</view>
					<view class="summary">222</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { list } from '@/api/account/budgetInfo';
	import { accountBudgetTypes } from '@/utils/enums';
	export default {
		data() {
			return {
				topTabsIndex: 0,
				dataList: [],
				accountBudgetTypes
			}
		},
		mounted() {},
		onShow() {
			this.getData();
		},
		computed: {
			tabsHeight() {
				return (this.vuex_custom_bar_height - this.vuex_status_bar_height) + 'px';
			}
		},
		methods: {
			getData() {},
			edit(item) {},
			/**
			 * 关闭当前窗口
			 */
			close() {
				uni.$common.navigateBack();
			},
			/**顶部切换
			 * @param {Object} index
			 */
			topTabsChange(index) {
				this.topTabsIndex = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-account-budget {
		.top-right {
			font-size: 40rpx;
			margin-right: 20rpx;
			font-weight: bold;
		}

		.budget_content {
			.item {
				.title {}

				.item_content {
					.chart {}
				}
			}
		}
	}
</style>